<!--
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2022-01-07 
 -->


<template>
  <el-skeleton :loading="loading" animated :throttle="500" :count="count">
    <template #template>
      <el-skeleton-item class="ske-img" variant="image" />
    </template>
    <template #default>
      <el-carousel class='artist' height="340px" :interval="8000" arrow="never" indicator-position="outside">
        <el-carousel-item class="box" :key="index" v-for="(list, index) in lists">
          <router-link :to="{ path: '/artist', query: { id: item.id }}" :key="item.id" v-for="item in list" class="item">
            <div class="faceImg">
              <el-image :src="item.picUrl + '?param=100y100'">
                <template v-slot:placeholder class="image-slot">
                  <i class="iconfont icon-placeholder"></i>
                </template>
              </el-image>
            </div>
            <div class="info">
              <div class="artist-name" v-if="item.name">{{item.name}}</div>
            </div>
          </router-link>
        </el-carousel-item>
      </el-carousel>
    </template>
  </el-skeleton>
</template>

<script>
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { useInstance } from "@/hooks";
import { TOPARTISTS } from "@/api";
export default defineComponent({
  name: 'artistList',
  setup(props, { emit, slots }) {
    const { $Message: $message } = useInstance();
    // 热门电台
    const info = reactive({
      lists: [],
      params: { limit: 27 },
      count: 9,
      loading: true
    });
    // 热门歌手
    const getArtists = async (params) => {
      const defaults = { limit: 30, offset: 0 };
      const { code, artists } = await TOPARTISTS({ ...defaults, ...params });
      if (code !== 200) return $message.error('数据请求失败');
      info['lists'] = splitGroup(artists, 9);
      info['loading'] = false;
    }

    const splitGroup = (array, subGroupLength) => {
      let index = 0;
      const newArray = [];
      while (index < array.length) {
        newArray.push(array.slice(index, index += subGroupLength));
      }
      return newArray;
    }
    onMounted(() => {
      getArtists(info['params']);
    })

    return {
      ...toRefs(info),
    }
  }
});

</script>

<style lang="scss" scoped>
.artist {
    display: block;
    height: 360px;
    font-size: 0;

    .box {
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        justify-content: space-around;
    }

    .item {
        width: 100px;
        height: 100px;
        border-radius: 4px;
        overflow: hidden;
    }
}

.el-skeleton {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-around;
    height: 340px;

    .ske-img {
        width: 100px;
        height: 100px;
    }
}
</style>
